<template>
    <view class="case-select-page">
        <!-- uView 的导航栏组件 -->
        <NavBar :title="'情形选择'" :isShowIcon="true" />
        <!-- 问题列表区域，使用 view 和 u-cell、单选框等组件 -->
        <view class="question-list">
            <view v-for="(question, index) in questions" :key="index" class="question-item">
                <view class="question-title">{{ question.title }}</view>
                <view class="radio-group">
                    <u-radio-group @change="(e) => handleRadioChange(question.key, e)">
                        <u-radio v-for="(option, optIndex) in radioList" :key="optIndex" :label="option.label"
                            :name="option.value"></u-radio>
                    </u-radio-group>
                </view>
            </view>
        </view>

        <!-- 下一步按钮，使用 uView 的按钮组件 -->
        <view class="next-step-btn">
            <u-button type="primary" @click="goNextStep">下一步</u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            radioValues: {
                1: '',
                '1.1': '',
                '1.1.1': '',
                2: '',
                3: ''
            },
            radioList: [
                {
                    label: '是',
                    value: 1
                },
                {
                    label: '否',
                    value: 0
                }
            ],
            questions: [
                { key: '1', title: '1.您是否需要办理户口登记？' },
                { key: '1.1', title: '1.1您是否需要办理城乡居民参保登记（基本医疗保险）？' },
                { key: '1.1.1', title: '1.1.1您是否需要办理社会保障卡？' },
                { key: '2', title: '2.您是否需要办理预防接种证？' },
                { key: '3', title: '3.您是否需要办理生育医疗费用报销？' }
            ]
        };
    },
    methods: {
        // 处理单选框改变事件
        handleRadioChange(questionKey, e) {
            this.radioValues[questionKey] = e.detail.value;
        },
        // 模拟下一步操作，实际可根据需求跳转页面或提交数据等
        goNextStep() {
            console.log('当前选择结果：', this.radioValues);
            // 假设要跳转到下一个页面，可使用 uni.navigateTo 等跳转 API，示例：
            // uni.navigateTo({
            //   url: '/pages/nextPage/nextPage'
            // });
        },
        // 处理导航栏左侧返回按钮点击
        onClickLeft() {
            uni.navigateBack();
        }
    }
};
</script>

<style scoped lang="scss">
.case-select-page {
    background-color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    .question-list {
        padding: 15px;

        .question-item {
            border-bottom: 1px solid #f0f0f0; // 添加底部边框模拟 u-cell-group 的分隔效果
            padding: 10px 0; // 调整内边距

            &:last-child {
                border-bottom: none; // 移除最后一个项目的底部边框
            }

            .question-title {
                font-size: 14px;
                color: #333;
                margin-bottom: 5px; // 标题与单选按钮之间的间距
            }

            .radio-group {
                display: flex;
                align-items: center;

                .u-radio {
                    margin-right: 20px; // 调整单选按钮之间的间距

                    /* 单选按钮样式微调 */
                    ::v-deep .u-radio__icon__border {
                        width: 16px;
                        height: 16px;
                        border: 1px solid #ccc;
                    }

                    ::v-deep .u-radio__icon__inner {
                        width: 8px;
                        height: 8px;
                        background-color: #19be6b; // 选中时的圆点颜色
                    }

                    ::v-deep .u-radio__label {
                        font-size: 14px;
                        color: #333;
                    }
                }
            }
        }
    }

    .next-step-btn {
        display: flex;
        justify-content: center;
        padding: 15px;
        margin-top: auto;
        /* 让按钮靠底部 */

        .u-button {
            width: 80%;
            border-radius: 8px;
        }
    }
}
</style>